/*
 * @Author: lmk
 * @Date: 2022-06-03 17:13:27
 * @LastEditTime: 2022-06-04 22:07:28
 * @LastEditors: lmk
 * @Description: 首页
 */

import Footer from '@/components/footer';
import { menuList, routeItem } from '@/routes';
import { NavBar, Toast } from 'antd-mobile';
import React from 'react';
import { useNavigate } from 'react-router-dom';
import './index.css';
const HomePage = () => {
  const navigate = useNavigate()
  const navTo = (item:routeItem)=>{
    if(item.unCompleted){
      Toast.show('敬请期待')
      return false;
    }
    navigate(`${item.path}`,{
      state:{
        formType:'homePage'
      }
    })
  }
return <>
  <NavBar backArrow={false}>
    <span className="text-lg font-bold text-primary">首页</span>
  </NavBar>
  <div className='p-5'>
    {/* banner */}
    <div className='banner bg-white mb-4 rounded-lg flex items-center box-shadow'>
      <div className='logo flex items-center justify-center flex-none'>logo</div>
      <div className='right-banner-content text-right flex-auto pr-5'>
        <p className='title'>牛金金量化金融</p>
        <div className='desc'>
          <p>用户定制-投资模型量化</p>
          <p>全球数据化-经济趋势研究</p>
          <p>全数据量化回测-实时数据监控</p>
        </div>
      </div>
    </div>
    <div className='grid grid-cols-4 bg-white rounded-lg box-shadow'>
      {menuList.map((item, index) => {
        return <div key={index} onClick={()=>navTo(item)} className={`text-center mt-3 ${item.unCompleted ? 'unComplated' : ''}`}>
          <svg className="icon" aria-hidden="true">
            <use xlinkHref={`#${item.icon}`}></use>
          </svg>
          <p className='mt-2'>{item.name}</p>
        </div>
      })}
      <div className={`text-center mt-3 unComplated`} onClick={()=>navTo({unCompleted:true} as routeItem)}>
          <svg className="icon more" aria-hidden="true">
            <use xlinkHref="#icon-gengduo"></use>
          </svg>
          <p className='mt-2'>更多</p>
        </div>
    </div>
  </div>
  <Footer />
</>
};

export default HomePage;


